<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: url(img/01.jpg) no-repeat;
				background-size: cover;
			}

			table {
				color: #00BFFF;
				width: 600px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}

			table tr {
				height: 50px;
			}

			input {
				box-sizing: border-box;
				border: 1px solid #444444;
				width: 300px;
				height: 30px;
				border-radius: 5px;
				padding: 0 10px;
			}

			#sub,
			#res {
				width: 80px;
				background: #5BC0DE;
				cursor: pointer;
			}

			h2,
			p {
				line-height: 100px;
				text-align: center;
				font-size: 40px;
				color: darksalmon;
			}

			a {
				position: absolute;
				cursor: pointer;
				width: 100px;
				height: 50px;
				font-size: 25px;
				right: 50px;
				top: 50px;
				background: chartreuse;
				border-radius: 5px;
				line-height: 50px;
				color: #fff;
				text-align: center;
				text-decoration: none;
			}

			a:hover {
				background: fuchsia;
				color: #000;
			}
			#checkb{
				width: 20px;
				height: 20px;
				transform: translate(0,5px);
			}
		</style>
		<script src="urla.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h2>
			请登录😊
		</h2>
		<p></p>
		<a href=`${url}/registered.html`>注册 </a> <form>
			<table border="1px" cellspacing="0">
				<tbody>
					<tr>
						<td rowspan="4" align="center">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td align="right">用户名：</td>
						<td>
							<input type="text" id="uname" placeholder="请输入用户名">
						</td>
					</tr>
					<tr>
						<td align="right">密码：</td>
						<td>
							<input type="password" id="pwd" placeholder="请输入密码">
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="button" id="sub" value="提交">
							<input type="reset" id="res" value="重置">
							<input type="checkbox" id="checkb" />记住密码
						</td>
					</tr>
				</tbody>
			</table>
			</form>
			<script src="jquery.min.js" type="text/javascript"></script>
			<script src="prevs.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				$("#sub").click(() => {
					if (!$("#uname").val() || !$("#pwd").val()) {
						$("p").html("请填写完整用户名与密码");
						return;
					}
					$("p").html("");
					$.ajax({
						url: `${url}/selun`,
						data: {
							uname: $("#uname").val(),
							pwd: $("#pwd").val()
						},
						success(data) {
							if (data === "success") {
								if ($("#checkb")[0].checked) {
									setCookie("uname", $("#uname").val(), 30);
									setCookie("pwd", $("#pwd").val(), 30);
								}
								sessionStorage.setItem("uname", $("#uname").val());
								sessionStorage.setItem("pwd", $("#pwd").val());
								location.href = `${url}/`
							}
							if (data === "nouser") {
								$("p").html("无账户，请前往注册页面注册");
								$("#uname").val("");
								$("#pwd").val("");
							}
							if (data === "err") {
								$("p").html("密码错误");
							}
							if (data === "fail") {
								$("p").html("登录失败");
							}
						}
					})
				})
				$(()=>{
					if(getCookie("uname") && getCookie("pwd")){
						$("#uname").val(getCookie("uname"));
						$("#pwd").val(getCookie("pwd"));
					}
				})
			</script>
	</body>
</html>
